<template>
	<view class="content">
		<view class="head">
			<u-navbar leftIcon="arrow-leftward" :placeholder='true' @leftClick="leftClick('/pages/mine/gather/index')"
				title="訂單詳情">
			</u-navbar>
		</view>
		<view class="main">
			<view class="order-item" v-for="(item,index) in list" :key="index">
				<view class="item">
					<view class="item-left">
						訂單號：
					</view>
					<view class="item-right">
						{{item.order_sn}}
						<text class="coppy" @click="copyTextToClipboard(item.order_sn)">複製</text>
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						部門：
					</view>
					<view class="item-right">
						{{item.departmentname}}
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						子公司/分行：
					</view>
					<view class="item-right">
						{{item.branchname ||item.company}}
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						打單員：
					</view>
					<view class="item-right">
						{{item.userID}}
						<text class="coppy" @click="copyTextToClipboard(item.userID)" >複製</text>
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						金額：
					</view>
					<view class="item-right">
						<view class="price">
              {{item.order_amount}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						狀態：
					</view>
					<view class="item-right">
						<view v-if="item.status!=null && item.order_status==0">
							{{item.status | status}}
						</view>
						<view v-else-if="item.pay_status">
							{{item.pay_status| pay_status}}
						</view>
						<view v-else>
							{{item.order_status | orstatus}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		ordermonthdetail
	} from '@/network/api/user.js'
	export default {
		data() {
			return {
				month: '',
				page: 1,
				list: []
			}
		},
		filters: {
			// 列表订单状态过滤器
			status(
				val,
			) {
				switch (val) {
					case 0:
						return '未審批'
						break;
					case 1:
						return '已審批'
						break;
					case 2:
						return '申請修改'
						break;
					case 3:
						return '取消訂單'
						break;
					case 4:
						return '未通過'
						break;
				}
			},
			orstatus(
				val,
			) {
				switch (val) {
					case '0':
						return '無需審批'
						break;
					case '1':
						return '未付款'
						break;
					case '2':
						return '已付款'
						break;
					case '3':
						return '已確認收'
						break;
					case '4':
						return '已發貨'
						break;
					case '5':
						return '已退貨'
						break;
					case '6':
						return '全單取消'
						break;
					case '7':
						return '要求退貨'
						break;
					case '8':
						return '已退貨'
						break;
				}
			},
			pay_status(val) {
				switch (val) {
					case '0':
						return '待付款'
						break;
					case '10':
						return '逾期'
						break;
					case '20':
						return '已全數支付'
						break;
					case '30':
						return '已部分支付'
						break;
				}
			}
		},

		onLoad(e) {
			this.month = e.month
		},
		onReachBottom() {
			this.page++
			this.getordermonthdetail()
		},
		onShow() {
			this.getordermonthdetail()
		},
		methods: {
			copyTextToClipboard(textToCopy) {
				uni.setClipboardData({
					data: textToCopy,
					success() {
						uni.showToast({
							title: '已复制到剪切板',
							icon: 'none'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
		async getordermonthdetail() {
			let data = {
				lang: 'cn',
				month: this.month,
				release: '',
				relend: '',
				order_sn: '',
				user_id: '',
				order_status: '',
				page: this.page
			}
			const res = await ordermonthdetail(data)
			let newlist = res.data.order
			this.list = [...this.list, ...newlist]
		},
		leftClick(url) {
			uni.navigateTo({
				url: url
			})
		}
	}
	}
</script>

<style lang="scss">
	.content {
		.main {
			padding: 32rpx;

			.order-item {
				padding: 16rpx 0;
				border-bottom: 1rpx solid #DEDEDE;

				.item {
					margin: 16rpx 0;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;

					.item-left {
						color: #999999;

					}

					.item-right {
						.price {
							color: #4949C3;
						}

						.coppy {
							margin-left: 15rpx;
							padding: 3rpx 15rpx;
							border: 1rpx solid #DEDEDE;
							border-radius: 12rpx;
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
						}

						color: #000000;
					}
				}

			}

			.order-item:last-child {
				border-bottom: none;
			}
		}
	}
</style>
